<!DOCTYPE html>
<html>
    <head>
        <title>HT icon</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        </style>     
        <script src="../../../../lib/core/ht.js"></script>   
        <script>
            ht.Default.setImage('china', '');
            ht.Default.setImage('spain', '');
            ht.Default.setImage('usa', '');
            
            ht.Default.setImage('arrow', {
                width: 100,
                height: 50,
                comps: [
                    {
                        type: 'shape',
                        points: [20, 25, 70, 25],
                        borderWidth: 5,
                        borderColor: 'black',
                        border3d: true
                    },
                    {
                        type: 'shape',
                        points: [60, 10, 60, 40, 80, 25, 60, 10],
                        background: {
                            value: 'black',
                            func: 'attr@arrow.color' 
                        },
                        borderWidth: 1,
                        borderColor: '#40ACFF',
                        gradient: 'spread.vertical'
                    }
                ]
            });
            function init(){
                dataModel = new ht.DataModel();
                graphView = new ht.graph.GraphView(dataModel);
                view = graphView.getView();
            
                view.className = 'main';
                document.body.appendChild(view);
                window.addEventListener('resize', function() {
                    graphView.invalidate();
                }, false);
            
                node1 = new ht.Node();
                node2 = new ht.Node();
                edge = new ht.Edge(node1,node2);
                
                node1.setPosition(50,100);
                node2.setPosition(300,100);
                
                dataModel.add(node1);
                dataModel.add(node2);
                dataModel.add(edge);
                
                edge.addStyleIcon("flags", {
                    position: 17,
                    direction: 'east',
                    offsetX: -26,
                    gap: 10,
                    names: ['china', 'spain', 'usa']
                });
                
                edge.addStyleIcon("arrow1", {
                    position: 2,
                    width: 50,
                    height: 25,
                    keepOrien: true,
                    names: ['arrow']
                });
                
                edge.addStyleIcon("arrow2", {
                    position: 4,
                    width: 50,
                    height: 25,
                    positionFixed: true,
                    names: ['arrow']
                });                
                
                node2.setStyle("icons", {
                    flags: {
                        position: 2,
                        direction: 'east',
                        rotation: Math.PI / 4,
                        names: ['china', 'spain', 'usa']
                    }
                });
                                
                node1.setStyle("icons", {
                    flags: {
                        position: 30,
                        direction: 'east',
                        offsetY: 3,
                        names: [
                            {
                                width: 10,
                                height: 10,
                                comps: [
                                    {
                                        type: 'circle',
                                        rect: [0, 0, 10, 10],
                                        background: 'red',
                                        gradient: 'radial.center'
                                    },
                                    {
                                        type: 'circle',
                                        rect: [0, 0, 10, 10],
                                        borderColor: '#3498DB',
                                        borderWidth: 1,
                                        visible: {
                                            func: function(data){
                                                return data.a('select.index') === 0;
                                            }
                                        }
                                    }
                                ]                                
                            },
                            {
                                width: 10,
                                height: 10,
                                comps: [
                                    {
                                        type: 'circle',
                                        rect: [0, 0, 10, 10],
                                        background: 'yellow',
                                        gradient: 'radial.center'
                                    },
                                    {
                                        type: 'circle',
                                        rect: [0, 0, 10, 10],
                                        borderColor: '#3498DB',
                                        borderWidth: 1,
                                        visible: {
                                            func: function(data){
                                                return data.a('select.index') === 1;
                                            }
                                        }
                                    }
                                ]                                
                            },
                            {
                                width: 10,
                                height: 10,
                                comps: [
                                    {
                                        type: 'circle',
                                        rect: [0, 0, 10, 10],
                                        background: '#1ABC9C',
                                        gradient: 'radial.center'
                                    },
                                    {
                                        type: 'circle',
                                        rect: [0, 0, 10, 10],
                                        borderColor: '#3498DB',
                                        borderWidth: 1,
                                        visible: {
                                            func: function(data){
                                                return data.a('select.index') === 2;
                                            }
                                        }
                                    }
                                ]                                
                            }
                        ]
                    }
                });
                
                graphView.onDataClicked = function(data, e) {
                    if(data === node1){
                        var info = this.getIconInfoAt(e, data);
                        if(info){
                            edge.a('arrow.color', info.name.comps[0].background);
                            node1.a('select.index', info.index);
                        } 
                    }                                       
                };
            }
        </script>
    </head>
    <body onload="init();">
    </body>
</html>
